/**
 * @file 已绑定用户/角色列表
 * @date 2025/11/17 16:18:27
 * @author lyqjob@yeah.net
 */

import { memo,useState,useMemo,useCallback,useEffect } from 'react';
import { Table, message ,Button,Flex} from 'antd';
import zhCN from 'antd/locale/zh_CN.js';

const BindDataList = memo((props ) => {
    const {active , columns,PageChange,fetchList,id,refresh} = props;
    const [current,setCurrent] = useState(1);
    const [pageSize,setPageSize] = useState(10);
    const [innerData,setInnerData] = useState([]);
    const [innerTotal,setInnerTotal] = useState(0);
    const [loading,setLoading] = useState(false);




    // 分页改变时调用
    const onPageChange = useCallback((page, pageSize) => {
        setCurrent(page);
        setPageSize(pageSize);
        if (fetchList) {return}
        PageChange && PageChange(page,pageSize);
    }, [PageChange, fetchList]);

    useEffect(() => {
        if (!fetchList || !id) {return}
        setLoading(true);
        (async ()=>{
            try {
                const result = await fetchList(current, pageSize);
                const list = result?.data || [];
                const t = result?.total || 0;
                setInnerData(list);
                setInnerTotal(t);
            } finally {
                setLoading(false);
            }
        })();
    }, [fetchList, id, active, current, pageSize, refresh]);

    useEffect(() => {
        if (!id) {
            setInnerData([]);
            setInnerTotal(0);
            setCurrent(1);
        }
    }, [id, active]);


    // 分页
    const rowSelection = {
        onChange: (_newSelectedRowKeys, _selectedRows) => {
            // setSelectedRowKeys(newSelectedRowKeys);
        },
        getCheckboxProps: record => ({
            disabled: record.name === '超级管理员', // Column configuration not to be checked
        }),
    };

    // 表头
    const HeaderNode = useMemo(() => (
        <Flex justify="space-between" align="center">
            <h3 style={{margin:0}}>{active==='user'?'已分配角色':'已绑定用户'}</h3>
            <div style={{display:'flex',justifyContent:'flex-end'}}>
                <Button type="primary" onClick={()=>message.warning('功能开发中')}>批量移除</Button>
            </div>
        </Flex>
    ), [active]);

    return (
        <Table 
            locale={zhCN}
            size="middle"
            title={() => HeaderNode} 
            columns={columns} 
            dataSource={innerData} 
            scroll={{x: 800, y: 300}}
            rowKey="id"
            rowSelection={{ type: 'checkbox', ...rowSelection }}
            // rowSelection={false}
            pagination={useMemo(() => ({
                pageSize:pageSize,
                current:current,
                showPage:true,
                total: innerTotal,
                showTotal: (total, range) => `${range[0]}-${range[1]} 共 ${total} 条`,
                onChange:onPageChange
            }), [pageSize, current, innerTotal, onPageChange, fetchList])}
            loading={loading}
        />
    )
})

export default BindDataList;